<template>
    <div class="imgButton" :class="[{'noImg':!options.imageUrl}]" :style="`height:${!options.imageUrl ? options.lineHeight/2+'px':'auto'};padding-top:${options.paddingTop/2}px;padding-bottom:${options.paddingBottom/2}px;`" draggable="false"  >
        <div style="position:relative;height:100%;width:100%;">
            <img :src="options.imageUrl"  v-if='options.imageUrl' alt="">
            <div class="box_shadow" v-if='!options.imageUrl &&options.btnList && !options.btnList.length'>
                <!-- <div class="react_box"></div> -->
                <p >请在右侧添加需要的图片</p>
            </div>
            <div class="linkBtn" :style="`bottom:${ options.bottom}px; text-align:${options.btnAlign}`">
                <span v-for='(item,index) in options.btnList' :key='index' :style="`background:${item.borderType==2 ? item.bgOrBorderColor:''};border:1px solid ${item.borderType==1 ? item.bgOrBorderColor:'none'};line-height:${options.lineHeight/2}px;height:${options.lineHeight/2}px;padding:0 ${options.textPadding/2}px;font-family:${item.textFontFamily || 'Microsoft YaHei' };color:${item.textColor || '#ffffff' };font-size:${item.fontSize/2 ||14}px;border-radius:${options.borderRadius}px;margin:0 ${options.btnMargin/2}px;`">{{item.textContent||'立即预约'}}</span>
            </div> 
        </div>
         
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:{}
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val));
        }
    },
    mounted(){
        this.options =JSON.parse(JSON.stringify(this.option));
    }
}
</script>
<style lang="less" scoped>
    .imgButton{
        width:100%;
        height: auto;
        position:relative;
        img{
            width:100%;
            height:100%;
        }
    }
    .linkBtn{
        position:absolute;
        width:100%;
        z-index: 100;
        span{
            display:inline-block;
            width:auto;
            font-size: 14px;
            margin-left:20px;
            vertical-align: top;
            box-sizing: border-box;
        }
        span:nth-child(1){
            margin-left:0;
        }
    }
    // .noImg{
    //     min-height:100px;
    // }
    .box_shadow{
        position:absolute;
        width:100%;
        height:100%;
        z-index: 200;
        top:0;
        left:0;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 14px;
        color:#918985;
        .react_box{
            width:70px;
            height:56px;
            margin-bottom:19px;
            background:url('~@/assets/img/editContent/pic-nor.png') center center  no-repeat;
            background-size:cover;
        }
    }
</style>